<!--
 * @Author: xiaobaobeibai 604070135@qq.com
 * @Date: 2022-08-08 19:11:40
 * @LastEditors: smallWhite
 * @LastEditTime: 2024-07-12 10:32:50
 * @FilePath: /huizhou_website_admin/src/views/information/notice_management/components/details.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div style="height:30px">
      <el-breadcrumb
        separator-class="el-icon-arrow-right">
        <el-breadcrumb-item
          :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>公告公示</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-card shadow="never"
      class="mb20">
      <div slot="header">
        {{ title }}</div>
      <el-form ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="110px"
        class="demo-ruleForm">
        <el-form-item
          label="类别"
          prop="type">
          <el-select
            v-model="ruleForm.type"
            style="width:100%"
            placeholder="请选择公告类别">
            <el-option
              v-for="(item,index) in list"
              :key="index"
              :label="item.name"
              :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item
          label="公告标题"
          prop="title">
          <el-input
            v-model="ruleForm.title"
            placeholder="请输入公告标题" />
        </el-form-item>

        <el-form-item
          label="上传图片"
          prop="url">
          <el-upload
            class="avatar-uploader"
            :action="action"
            :show-file-list="false"
            name="multipartFile"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img
              v-if="ruleForm.imagesUrl"
              :src="ruleForm.imagesUrl"
              class="avatar">
            <i v-else
              class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
          <el-input
            v-show="false"
            v-model="ruleForm.url"
            placeholder="请上传图片" />
        </el-form-item>

        <el-form-item
          label="排序"
          prop="sort">
          <el-input
            v-model="ruleForm.sort"
            placeholder="请输入排序" />
        </el-form-item>
        <el-form-item
          label="是否启用"
          prop="isEnable">
          <el-switch
            v-model="ruleForm.isEnable"
            :active-value="0"
            :inactive-value="1" />
        </el-form-item>
        <el-form-item
          label="是否置顶"
          prop="isTop">
          <el-switch
            v-model="ruleForm.isTop"
            :active-value="0"
            :inactive-value="1" />
        </el-form-item>
        <el-form-item
          label="发布时间"
          prop="time">
          <el-date-picker
            v-model="ruleForm.time"
            type="date"
            style="width:100%"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="选择日期" />
        </el-form-item>
        <el-form-item
          label="简介"
          prop="introduction">
          <el-input
            v-model="ruleForm.introduction"
            type="textarea"
            placeholder="请输入简介" />
        </el-form-item>
        <el-form-item
          label="公告内容"
          prop="content">
          <!-- <Editors ref="Editor" v-model="ruleForm.content" :conact="ruleForm.content" class="CKEditor" @change="callbackChangeEditor" /> -->
          <Editors
            ref="Editor"
            v-model="ruleForm.content"
            :conact="ruleForm.content"
            class="CKEditor"
            @change="callbackChangeEditor" />
          <el-input
            v-show="false"
            v-model="ruleForm.content"
            type="textarea"
            placeholder="请输入简介" />
        </el-form-item>
        <el-form-item
          label="上传附件"
          prop="fileUrl">
          <el-upload
            class="upload-demo_fu"
            :action="action"
            name="multipartFile"
            :before-remove="beforeRemove"
            :on-success="handleSuccess"
            :limit="9"
            :file-list="fileList">
            <el-button
              size="small"
              type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm('ruleForm')">确定</el-button>
          <el-button
            @click="resetForm('ruleForm')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>

</template>

<script>
import { REQUEST_LIST } from '@/api/requestList'
import { HTTP_URI } from '@/api/baseUrl'
import EditorDiv from '@/components/wangeditor/quill_editor/index.vue'
import EditorIndex from '@/components/wangeditor/index.vue'
export default {
  components: { EditorIndex, EditorDiv },
  props: ['info'],
  data() {
    return {
      action: HTTP_URI.UPLOADIMG,
      title: '新增公告',
      url: '',
      clearEdit: false,
      fileList: [],
      list: [
        {
          id: 3,
          name: '公示公告'
        }
      ],
      ruleForm: {
        title: '',
        type: 3,
        fileUrl: '',
        introduction: '',
        isTop: '',
        sort: '',
        isEnable: '1',
        content: '',
        url: '',
        time: ''
      },
      loading: false,
      disshow: false,
      page: '',
      pageArr: [],
      rules: {
        title: [{ required: true, message: '请输入公告标题', trigger: 'blur' }],
        url: [{ required: true, message: '请上传图片', trigger: 'blur' }],
        type: [{ required: true, message: '请选择公告类别', trigger: 'blur' }],
        sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
        content: [{ required: false, message: '请输入', trigger: 'blur' }],
        introduction: [{ required: false, message: '请输入', trigger: 'blur' }],
        time: [{ required: true, message: '请选择发布时间', trigger: 'chnage' }]
      }
    }
  },
  watch: {
    info(val) {
      if (val.page === 'edit' && val.row) {
        this.$nextTick(() => {
          this.setForm(val.row)
        })
        this.title = '编辑公告'
      } else {
        this.title = '新增公告'
        this.ruleForm = {}
      }
    }
  },
  mounted() {
    if (this.info.page === 'add') {
      this.title = '新增公告'
    } else {
      this.title = '编辑公告'
      this.$nextTick(() => {
        this.setForm(this.info.row)
      })
    }
  },
  methods: {
    beforeRemove(file, fileList) {
      // this.$confirm(`确定移除 ${file.name}？`)

      this.fileList = this.fileList.filter(item => {
        return item.name != file.name
      })
      console.log(this.fileList)
    },
    handleSuccess(res, file) {
      console.log(file)
      this.fileList.push({
        name: file.name,
        url: res.data.previewUrl + '/' + res.data.fileName
      })
      this.uploadList.push(res.data.previewUrl + '/' + res.data.fileName)
    },
    setForm(e) {
      this.ruleForm = {
        title: e.title,
        type: e.type,
        introduction: e.introduction,
        isTop: e.isTop,
        sort: e.sort,
        isEnable: e.isEnable,
        content: e.content,
        url: e.url,
        time: e.time,
        imagesUrl: e.imagesUrl,
        id: e.id
      }
      this.fileList = JSON.parse(e.fileUrl)
    },
    handleAvatarSuccess(res, file) {
      this.loading = false
      this.ruleForm.url = res.data.fileName
      this.ruleForm.imagesUrl = res.data.previewUrl + '/' + res.data.fileName
    },
    callbackChangeEditor(value) {
      this.ruleForm.content = value
    },
    handleProgress() {
      this.loading = true
    },
    beforeAvatarUploads(file) {
      const isJPG = file.type === 'video/mp4'
      const isLt2M = file.size / 1024 / 1024 < 200
      if (!isJPG) {
        this.$message.error('视频只能为MP4格式')
      }
      if (!isLt2M) {
        this.$message.error('视频大小不能超过 200MB!')
      }
      return isJPG && isLt2M
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 10

      if (!isJPG) {
        this.$message.error('图片只能是JPG或者PNG 格式')
      }
      if (!isLt2M) {
        this.$message.error('图片大小不能超过 10MB!')
      }
      return isJPG && isLt2M
    },
    getApi(api, data, msg) {
      REQUEST_LIST.REQUST_FCN(api, data, true).then(res => {
        if (res.status === 200) {
          this.$emit('ok')
          this.$message.success(msg)
          this.handleClose()
        }
      })
    },
    submitForm() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.ruleForm.fileUrl = JSON.stringify(this.fileList)
          if (this.info.page === 'add') {
            this.getApi('NEWSADD', this.ruleForm, '添加成功！')
          } else {
            this.getApi('NEWSEDIT', this.ruleForm, '编辑成功！')
          }
        }
      })
    },
    handleClose() {
      this.title = ''
      this.fileList = []
      this.$emit('go', { view: 'ActiveList', page: 'list' })
    },
    resetForm(formName) {
      this.ruleForm = {}
      this.$refs[formName].resetFields()
      this.handleClose()
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-ruleForm {
  width: 70%;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
<style>
.upload-demo_fu .el-upload-list {
  opacity: 1 !important;
}
</style>
